<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<!-- 引入ElemeUI的CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<!-- 引入本地样式vue -->
		<script src="js/vue.js" type="text/javascript" charset="utf-8"></script>
		<!-- 引入ElementUI -->
		<script src="https://unpkg.com/element-ui/lib/index.js"></script>
		<!-- 引入axios -->
		<script src="https://unpkg.com/axios/dist/axios.min.js"></script>

	</head>
	<body>
		<div id="app">
			<center>
				<h1> {{msg}} </h1>			
			<el-form :inline="true" :model="formInline" class="demo-form-inline">
			  <el-form-item label="用户名">
			    <el-input v-model="uname" ></el-input>
			  </el-form-item>
			  <el-form-item label="密码">
			    <el-input v-model="upwd" type="password"></el-input>
			  </el-form-item>		  
			  <el-form-item>
			    <el-button type="primary" @click="searchCar()">登录</el-button>
			  </el-form-item>
			</el-form>
			</center>
		</div>
	</body>
	<script type="text/javascript">
		var vm = new Vue({
			el: '#app',
			data: {
				msg: '用户登录界面',
				uname: 'aa',
				upwd: '11'				
			},
			mounted: function() {
				console.log("初始化完毕");
				this.myinit();
			},
			methods: {
				searchCar(){				 
				  axios.get("http://localhost:9090/vue/vue/login",{
				    params:{
				      uname: this.uname,
				      upwd: this.upwd
				    }
				  }).then(response=>{
					 
				    console.log(response.data.msg);
				    if(response.data.msg=='success'){					
						//偷偷存入普通数据
						 localStorage.setItem("str", "存简单的字符串");
						 //存对象
						 var personobj=response.data.person;
						 console.log(JSON.stringify(personobj));
						 
						 localStorage.setItem("personobj", JSON.stringify(personobj));
						location='welcome.html?uname='+this.uname;
					}else{
						this.$message.error('用户名或者密码错误');
					}
				  }).catch(error=>{
				    alert("异步请求失败:"+error);
				  });				
				},
				myinit: function() {
					console.log("初始化完毕myinit方法:" + this.msg);
				}
			}
		});
	</script>
</html>
